<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<title>Login : Royal Thai Army </title>
<meta name="description" content="" />

<link href='images/Army-Officer-icon.ico' rel='icon' type='image/x-icon' />
<!-- <link href='images/Royal_Thai_Army_Seal.svg.ico' rel='icon' type='image/x-icon' /> -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/notifIt.css" />
<!-- <link rel="stylesheet" href="../css/bootstrap.css"> -->

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="s" uri="/struts-tags" %>

<script type="text/javascript" src="js/lib/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/lib/notifIt.js"></script>


<script>
	jQuery(function($) {
		$('#login').submit(
				function() {
					var valid = true;
					var errormsg = 'This field is required!';
					var errorcn = 'error';
					$('.' + errorcn, this).remove();
					$('.required', this).each(
							function() {
								var parent = $(this).parent();
								if ($(this).val() == '') {
									var msg = $(this).attr('title');
									msg = (msg != '') ? msg : errormsg;
									$('<span class="'+ errorcn +'">' + msg + '</span>').appendTo(parent).fadeIn('fast')
											.click(function() {
												$(this).remove();
											});
									valid = false;
								}
								;
							});
					return valid;
				});
		
	});
	
// 	var  _notif=function(){
	    
// 	    notif({
// 		    type: "error",
// 		    msg: " <font color'red'>Username or Password Incorrect</font>",
// 		    position: "center",
// // 		    width: 450,
// 		    time: 1200
// // 		    autohide: false
// 		  });
	    
// 	};
	
	
</script>

</head>


<body>

<div class="logindiv-style">

	<form method="post" name="login" action="j_spring_security_check" id="login">


		<h1 align="center">
			<strong><i class="fa fa-shield fa-lg"></i>&nbsp;&nbsp; Royal Thai Army &nbsp;&nbsp;<i class="fa fa-shield fa-lg"></i></strong>
		</h1>
<!--     <p class="register">Not a member? <a href="#">Register here!</a></p> -->
<!-- 		<div> -->
			<c:if test="${param.login_error == 1}">
			      <script type="text/javascript">
				      $(document).ready(function() {
						if('${param.login_error == 1}') {
// 						    notif({
// 							    type: "error",
// 							    msg: " <b><font color'red'>Username or Password Incorrect !</font>",
// 							    position: "center",
// 							    time: 1200
// 							  });
							$("#warnmsg").slideDown( 300 ).delay( 2000 ).slideUp( 300 )
						}
					});
				      
			      </script>
			      
			</c:if>
<!-- 		</div> -->

		<c:if test="${param.login_error == 1}">
				<p id="warnmsg" style="text-align: center; display:none;">
					 <b><font color='red'>Username or Password Incorrect !</font></b>
				</p>
		</c:if>
		<div>
			<label for="j_username"><i class="fa fa-user fa-lg"></i>
			 Username</label> <input type="text" id="j_username" name="j_username" 
			class="input-login field required" title="Please provide your username" value=""/>
		</div>

		<div>
			<label for="j_password"><i class="fa fa-lock fa-lg"></i>&nbsp; Password</label> <input type="password" id="j_password" name="j_password"
				class="field required" title="Password is required" value=""/>
		</div>
<p>
		<table border="0" >
			<tbody>
				<tr>
					<td width="70%">&nbsp;</td>
					<td style="text-align: right;"><input checked="checked" name="langRadios" type="radio" value="th" /></td>
					<td >&nbsp;<img src="images/flag-th.png" style="width:25px" /></td>
					<td style="text-align: right;" width="25px"><input name="langRadios" type="radio" value="en" /></td>
					<td >&nbsp;<img src="images/flag-en.png" style="width:25px" /></td>
					<td width="30px">&nbsp;</td>
				</tr>
			</tbody>
		</table>
</p>

<!-- 		<p class="forgot"><a href="#">Forgot your password </a></p> -->

		<div class="submit" align="right">
			<button type="submit" id="btn_submit" name="btn_submit"><strong>Log in</strong></button>
		</div>

<!-- 		<p class="back" > Baiwa company <i class="fa fa-leaf fa-lg"></i> Copyright 2015</p> -->
		<p class="back" > Copyright 2015  Baiwa Company. <i class="fa fa-leaf fa-lg"></i> All Rights Reserved</p>
		
		
	</form>
</div>
</body>
</html>
